<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="6em"
    >
        <el-row type="flex" :gutter="10">
            <el-col :span="24">
                <el-form-item label="封面图" prop="img">
                    <el-upload-image v-model="formData.img"></el-upload-image>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="文章标题" prop="title">
                    <el-input
                        v-model="formData.title"
                        placeholder="请输入文章标题"
                        type="textarea"
                        clearable
                        rows="3"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="文章分类" prop="cate_id">
                    <el-select
                        v-model="formData.cate_id"
                        filterable
                        placeholder="请选择文章分类"
                    >
                        <el-option
                            v-for="(item, index) in articleTypeData"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="点击量" prop="hits">
                    <el-input
                        v-model="formData.hits"
                        placeholder="请输入点击量"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="排序" prop="sort">
                    <el-input
                        v-model="formData.sort"
                        placeholder="请输入排序"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="启用状态" prop="status">
                    <el-switch
                        v-model="formData.status"
                        :active-value="1"
                        :inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="content" label-width="0px">
                    <div style="border: 1px solid #ccc;">
                        <Toolbar
                            style="border-bottom: 1px solid #ccc"
                            :editor="editor"
                            :defaultConfig="toolbarConfig"
                            :mode="mode"
                        />
                        <Editor
                            style="height: 500px; overflow-y: auto;"
                            v-model="formData.content"
                            :defaultConfig="editorConfig"
                            :mode="mode"
                            @onCreated="onCreated"
                        />
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >确认</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </el-form>
</template>

<script>
import { post } from "@/assets/js/http.js";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
    name: "article-add",
    props: {
        articleTypeData: {
            type: Array,
            default: () => []
        }
    },
    components: {
        "el-upload-image": () => import("@/components/el-upload-image.vue"),
        Editor,
        Toolbar
    },
    data() {
        return {
            editor: null,
            toolbarConfig: {},
            editorConfig: {
                MENU_CONF: {
                    uploadImage: {
                        fieldName: "file",
                        server: "/admin/ajax/upload",
                        headers: {
                            batoken: this.$store.state.token
                        },
                        /* eslint-disable-next-line */
                        customInsert(res, insertFn) {
                            insertFn(
                                "//zdcloud.zxkjnc.com" + res.data.file.url
                            );
                        }
                    }
                }
            },
            mode: "default",
            formData: {
                title: "",
                cate_id: "",
                img: [],
                hits: "",
                content: "",
                sort: "",
                status: 1
            },
            formRules: {
                title: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ],
                cate_id: {
                    required: true,
                    message: "此项为必填项"
                },
                img: {
                    required: true,
                    message: "此项为必填项"
                },
                hits: {
                    required: true,
                    message: "此项为必填项"
                },
                content: {
                    required: true,
                    message: "此项为必填项"
                },
                sort: [
                    {
                        required: true,
                        message: "此项为必填项"
                    },
                    {
                        pattern: /^[1-9]\d*$/,
                        message: "只能输入正整数"
                    }
                ],
                status: {
                    required: true,
                    message: "此项为必填项"
                }
            }
        };
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor);
        },
        onConfirm() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    if(formData.img.length > 0) {
                        formData.img =  formData.img[0].url;
                    } else {
                        formData.img = "";
                    }
                    if (formData.content) {
                        await post({
                            url: "/admin/wiki.news/add",
                            data: formData,
                            loading: true,
                            successTip: true
                        });
                        this.$emit("update");
                        this.$parent.$emit("update:visible", false);
                        this.$refs.formRef.resetFields();
                    } else {
                        this.$message.error("文章内容不能为空");
                    }
                }
            });
        },
        onCancel() {
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy();
    }
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>